<!-- 车辆管理 -->
<template>
  <view class="vehiclemanagement-index-box">
    <view class="vehiclemanagement-center-box">
      <view class="card-box" v-if="dataList.length">
        <view class="u-flex"
          >车辆信息<view class="card-icon-box">
            <view class="card-icon-child1-box"></view>
            <view class="card-icon-child2-box"></view> </view
        ></view>
        <view
          v-for="(item, index) in dataList"
          class="vehiclemanagement-center-item-box"
          :key="index"
        >
          <c_vehiclemanagementlist
            :vehiclemanagementlistObj="item"
            @routeJumpBtn="routeJumpBtn"
          />
        </view>
      </view>
      <!-- <view
        v-if="dataList.length === 0"
        style="text-align: center; line-height: 500rpx"
      >
        暂无车辆信息
      </view> -->
      <image
        v-if="dataList.length === 0"
        src="https://minio.wskjwl.com/uipicture/nodata.png"
        style="
          width: 500rpx;
          height: 500rpx;
          margin-left: 100rpx;
          margin-top: 100rpx;
        "
      />
      <!-- <u-empty text="暂无车辆信息" class="kong" mode="list"></u-empty> -->
      <!-- <u-loadmore
        v-if="dataList.length"
        bg-color="rgb(240, 240, 240)"
        :status="loadStatus"
      ></u-loadmore> -->
    </view>
    <u-button
      type="primary"
      class="vehiclemanagement-index-btn"
      @click="shortcutMenuFc"
      :disabled="
        userInfo.carInfo && userInfo.carInfo.carAuditStatus == '0'
          ? true
          : false
      "
      >{{
        (userInfo.carInfo && userInfo.carInfo.carAuditStatus == '2') ||
        !userInfo.carInfo
          ? '添加车辆'
          : '更换车辆'
      }}
    </u-button>
    <!-- 提示信息 -->
    <u-modal
      v-model="driverNameShow"
      :width="'600'"
      :showConfirmButton="false"
      :show-title="false"
    >
      <view style="font-weight: bold; padding: 10rpx 0 0 20rpx">系统提示</view>
      <image
        src="https://minio.wskjwl.com/uipicture/bell.png"
        style="width: 100rpx; height: 120rpx; margin-left: 40%"
      />
      <view class="driverName-box">
        <p class="driverName-box-p">
          1.请您准备好新车证件，确认更换后将不可撤销
        </p>
        <p class="driverName-box-p">2.确认后，您的账号将会被限制</p>
        <p class="driverName-box-p">3.新车审核通过后，才可进行抢单</p>
      </view>
      <view
        style="
          display: flex;
          justify-content: space-around;
          margin-bottom: 20rpx;
        "
      >
        <u-button
          type="primary"
          shape="circle"
          plain
          style="width: 35%"
          @click="driverNameShow = false"
          >取 消
        </u-button>
        <u-button
          type="primary"
          shape="circle"
          style="width: 35%"
          @click="driverNameconfirm"
          >确 定
        </u-button>
      </view>
    </u-modal>
  </view>
</template>
<script>
import { d_resNull } from 'common/util.js'
import c_vehiclemanagementlist from './components/c_vehiclemanagementlist'
export default {
  components: {
    c_vehiclemanagementlist,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      oadStatus: 'loadmore',
      dataList: [],
      userInfo: {},
      driverNameShow: false,
    }
  },
  // onReachBottom() {
  //   if (this.pageSize < this.total) {
  //     this.showLoading()
  //     this.loadStatus = 'loading'
  //     setTimeout(() => {
  //       this.pageSize++
  //       uni.stopPullDownRefresh()
  //       this.getDataList()
  //       this.loadStatus = 'nomore'
  //     }, 5500)
  //   } else {
  //     this.loadStatus = 'nomore'
  //   }
  // },
  // // 强制下拉刷新
  // onPullDownRefresh() {
  //   this.pageNum = 1
  //   this.pageSize = 10
  //   this.showLoading()
  //   setTimeout(() => {
  //     uni.stopPullDownRefresh()
  //     this.getDataList()
  //   }, 5500)
  // },
  onShow() {
    this.getDataList()
    this.getuserInfo()
  },
  methods: {
    showLoading() {
      uni.showLoading({
        title: '加载中',
      })
    },
    hideLoading() {
      uni.hideLoading()
    },
    //跳转详情
    routeJumpBtn(val) {
      uni.navigateTo({
        url: '/pages/vehiclemanagement/detail?id=' + val.id,
      })
    },
    //路由
    shortcutMenuFc() {
      if (
        this.userInfo.carInfo &&
        this.userInfo.carInfo.carAuditStatus == '2'
      ) {
        uni.navigateTo({
          url:
            '/pages/vehiclemanagement/vehiclemaintenanceEdit?id=' +
            this.dataList[0].id,
        })
      } else {
        if (this.dataList.length === 0) {
          uni.navigateTo({
            url: '/pages/vehiclemanagement/vehiclemaintenance',
          })
        } else {
          this.driverNameShow = true
        }
      }
    },
    //系统提示-确定
    driverNameconfirm() {
      uni.navigateTo({
        url: '/pages/vehiclemanagement/vehiclemaintenance',
      })
    },
    //根据登录用户查询货源单
    async getDataList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      const { code, result, message } = await this.$u.get(
        '/freight-business/driver/car/list',
        params
      )
      if (code === '0') {
        this.hideLoading()
        this.dataList = d_resNull(result.records)
        this.total = result.total
      } else {
        this.hideLoading()
        this.$api.msg(message)
      }
    },
    async getuserInfo() {
      const res = await this.$u.get('/freight-business/get/driverInfo')
      if (res.code === '0') {
        this.userInfo = res.result
      } else {
        this.$api.msg(res.message)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.vehiclemanagement-index-box {
  width: 100%;
  .vehiclemanagement-center-box {
    margin: 16rpx;
    height: 90vh;
    overflow: hidden;
    overflow-y: scroll;
    .vehiclemanagement-center-item-box {
      margin-bottom: 16rpx;
      border-radius: 8rpx;
    }
  }
  .card-box {
    background: white;
    margin-top: 24rpx;
    border-radius: 10rpx;
    padding: 24rpx 24rpx 0;
    .card-title-box {
      font-size: 28rpx;
      font-weight: 600;
    }
    .card-icon-box {
      margin-left: 6rpx;
      position: relative;
      .card-icon-child1-box {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #57a3ff;
        position: absolute;
        top: -12rpx;
        left: 10rpx;
        z-index: 1;
      }
      .card-icon-child2-box {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #add3ff;
        position: absolute;
        top: -6rpx;
        left: 20rpx;
      }
    }
  }
  .vehiclemanagement-index-btn {
    width: 96%;
    margin: 0 16rpx;
    position: fixed;
    bottom: 40rpx;
  }
  .driverName-box {
    .driverName-box-p {
      font-size: 28rpx;
      padding: 10rpx 20rpx;
    }
  }
}
</style>
